/**
 * Created by caosh on 2018/1/15 0015.
 */
var Login = new Vue({
    el: '#login',
    data: {
        duration: 1500, // toast提示显示时长  毫秒
        tip: '登录', // 顶部提示语
        show: 'login', // 控制显示对应的form login：登录 register：注册 password：密码
        isShowMask: false, // 是否显示遮罩层 默认不显示
        loginForm: {tel: '', password: '', isShow: false}, // 登录绑定的数据
        registerForm: { // 注册表单绑定的数据
            tel: '', // 手机号码
            validCode: '', // 验证码
            inviteCode: '', // 邀请码
            password: '', // 密码
            repeatPassword: '', // 重复密码
            isShow: false, // 是否显示密码
            codeMsg: '获取验证码', // 获取验证码按钮对应的文字
            isDisabled: false // 获取验证码按钮是否禁用
        },
        passwordForm: { // 找回密码绑定的数据
            tel: '',
            validCode: '',
            password: '',
            repeatPassword: '',
            isShow: false,
            codeMsg: '获取验证码',
            isDisabled: false
        }
    },
    methods: {
        // 显示注册表单
        showRegister: function () {
            this.show = 'register';
            this.tip = '注册';
            this.registerForm = {
                tel: '',
                validCode: '',
                inviteCode: '',
                password: '',
                repeatPassword: '',
                isShow: false,
                codeMsg: '获取验证码',
                isDisabled: false
            };
        },
        // 显示密码找回表单
        showPassword: function () {
            this.show = 'password';
            this.tip = '找回密码';
            this.passwordForm = {
                tel: '',
                validCode: '',
                password: '',
                repeatPassword: '',
                isShow: false,
                codeMsg: '获取验证码',
                isDisabled: false
            };
        },
        // 返回
        goBack: function () {
            if (this.show == 'login') {
                window.history.back(-1);
            } else {
                this.show = 'login';
                this.tip = '登录';
            }
        },
        // 登录
        login: function () {
            // 验证手机号码是否合法 （不是11位号码）
            if (!this.validTel(this.loginForm.tel)) return;

            // 密码不能为空
            if (this.loginForm.password.length == 0) {
                this.$toast({
                    message: '请输入密码',
                    className: 'bsz-toast-gray',
                    duration: this.duration
                });
                return;
            }

            // 请求后台
            /**
             $.post(url, loginForm, function(result) {
                if (passwordError) {
                    this.$toast({
                        message: '密码输入不正确，点击“忘记密码”重置密码',
                        className: 'bsz-toast-gray',
                        duration: this.duration
                    });
                    return;
                } else {
                    localStorage.setItem('isLogin', true);
                    localStorage.setItem('location', result.location);
                    localStorage.setItem('phone', result.phone);
                    window.location.href = './index.html';
                }
             }, 'json');
             */

                // 密码不正确 展示对应的提示信息
            var result = {'passwordError': false,location:'山东省潍坊市',phone: '13145678910'};
            if (result.passwordError) {
                this.$toast({
                    message: '密码输入不正确，点击“忘记密码”重置密码',
                    className: 'bsz-toast-gray',
                    duration: this.duration
                });
                return;
            } else {
                store.set('isLogin', true);
                store.set('user', result);
                window.location.href = './index.html';
            }
        },
        // 找回密码
        findPassword: function () {
            // 验证手机是否合法
            if (!this.validTel(this.passwordForm.tel)) return;

            // 验证两次密码是否一致
            if (!this.validPassword(this.passwordForm)) return;

            var duration = 2000,
                _this = this;
            this.isShowMask = true;

            // 请求后台
            /**
             $.ajax({
              type: 'POST',
              url: url,
              data: passwordForm,
              success: function(result){
                if (result.success) {
                    _this.$toast({
                        message: '注册成功',
                        iconClass: 'iconfont icon-success iconfont-g',
                        className: 'bsz-toast',
                        duration: duration
                    });

                    _this.tip = "登录";
                    _this.show = "login";
                }
              },
              complete: function(XHR, TS){
                var t = setInterval(function () {
                    _this.isShowMask = false;
                    if (!_this.isShowMask) {
                        clearInterval(t);
                    }
                },duration);
              },
              dataType: 'json'
            });
             */
                // 密码找回成功，返回登录页
            var result = {success: true};
            if (result.success) {
                _this.$toast({
                    message: '注册成功',
                    iconClass: 'iconfont icon-success iconfont-g',
                    className: 'bsz-toast',
                    duration: duration
                });

                _this.tip = "登录";
                _this.show = "login";
            }

            // 隐藏遮罩层
            var t = setInterval(function () {
                _this.isShowMask = false;
                if (!_this.isShowMask) {
                    clearInterval(t);
                }
            }, duration);
        },
        // 注册表单的注册功能
        register: function () {
            // 验证手机是否合法
            if (!this.validTel(this.registerForm.tel)) return;

            // 验证两次密码是否一致
            if (!this.validPassword(this.registerForm)) return;

            var duration = 2000,
                _this = this;
            this.isShowMask = true;

            // 请求后台
            /**
             $.ajax({
              type: 'POST',
              url: url,
              data: registerForm,
              success: function(result){
                if (result.success) {
                    _this.$toast({
                        message: '注册成功',
                        iconClass: 'iconfont icon-success iconfont-g',
                        className: 'bsz-toast',
                        duration: duration
                    });

                    _this.tip = "登录";
                    _this.show = "login";
                }
              },
              complete: function(XHR, TS){
                var t = setInterval(function () {
                    _this.isShowMask = false;
                    if (!_this.isShowMask) {
                        clearInterval(t);
                    }
                },duration);
              },
              dataType: 'json'
            });
             */
                // 注册成功，返回登录页
            var result = {success: true};
            if (result.success) {
                _this.$toast({
                    message: '注册成功',
                    iconClass: 'iconfont icon-success iconfont-g',
                    className: 'bsz-toast',
                    duration: duration
                });

                _this.tip = "登录";
                _this.show = "login";
            }

            // 隐藏遮罩层
            var t = setInterval(function () {
                _this.isShowMask = false;
                if (!_this.isShowMask) {
                    clearInterval(t);
                }
            }, duration);
        },
        // 验证密码
        validPassword: function (obj) {
            if (obj.password != obj.repeatPassword) {
                this.$toast({
                    message: '密码不一致,请重新输入!',
                    className: 'bsz-toast-gray',
                    duration: 1500
                });

                return false;
            }

            if (obj.password.length == 0) {
                this.$toast({
                    message: '请输入密码!',
                    className: 'bsz-toast-gray',
                    duration: 1500
                });

                return false;
            }

            return true;
        },
        // 验证手机
        validTel: function (tel) {
            if (tel.length != 11) {
                this.$toast({
                    message: '手机号码不是11位吗？',
                    className: 'bsz-toast-gray',
                    duration: 1500
                });

                return false;
            }

            return true;
        },
        // 获取验证码
        getValidCode: function (obj) {
            // 手机号码不合法 返回
            if (!this.validTel(obj.tel)) return;

            // 获得验证码的js效果
            var time = 90;
            obj.isDisabled = true;
            obj.codeMsg = time + 'S';
            var t = setInterval(function () {
                time--;
                obj.codeMsg = time + 'S';
                if (time == 0) {
                    clearInterval(t);
                    obj.isDisabled = false;
                    obj.codeMsg = '重新获取';
                }
            }, 1000);
        },
        solveAndroidView: function() { // 解决在安卓下由于键盘引起的页面变形问题
            var $input = document.getElementsByTagName("input");

            for (var i=0; i<$input.length; i++) {
                $input[i].onfocus=function() {
                    var _this = this;
                    setTimeout(function() {
                        _this.scrollIntoViewIfNeeded(true);
                        //_this.scrollIntoView(true);
                    }, 500);
                };
            }
        },
        isAndroid: function() {
            var u = navigator.userAgent, app = navigator.appVersion;
            return u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
        }
    },
    mounted: function(){
        if (this.isAndroid()) {
            var _body=document.getElementsByTagName('body')[0];
            _body.style.height=_body.clientHeight+"px";
            this.solveAndroidView();
        }
    },
    watch: {
        show: function(val, oldVal) {
            if (this.isAndroid()) {
                var _this = this;
                setTimeout(function(){
                    _this.solveAndroidView();
                }, 0);
            }
        }
    }
});

/*
// 解决在安卓下由于键盘引起的页面变形问题
window.onload=function(e){
    var u = navigator.userAgent, app = navigator.appVersion,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    if (isAndroid) {
        var _body=document.getElementsByTagName('body')[0],
            $input = document.getElementsByTagName("input");
        _body.style.height=_body.clientHeight+"px";

        for (var i=0; i<$input.length; i++) {
            $input[0].onfocus=function() {
                var _this = this;
                setTimeout(function() {
                    _this.scrollIntoViewIfNeeded(true);
                    _this.scrollIntoView(true);
                }, 500);
            };
        }
    }
}*/
